  <template>
  <el-container>
    <!-- 头部区域 -->
    <el-header>
			<div class="header_left">
				<h3>海易办后台管理系统</h3>
			</div>
			<div class="header_right">
				<el-button type="info" @click="logout">退出</el-button>
			</div>
    </el-header>
    <el-container>
      <!-- 左侧 -->
      <el-aside width="200px">
				<el-menu
          :default-active="activePath"
          class="el-menu-vertical-demo"
					background-color="#2b4b6b"
          text-color="#fff"
          active-text-color="#ffd04b"
          :router="true"
        >

          <!-- 一级菜单 -->
					<el-submenu index="1">
						<template slot="title">
							<i class="el-icon-s-cooperation"></i>
							<span>合同管理</span>
						</template>
						<!-- 二级级菜单 -->
						<el-menu-item
              index="/heTong"
              @click="saveNavState('/heTong')"
            >
							<template slot="title">
								<i class="el-icon-menu"></i>
								<span>合同列表</span>
							</template>
						</el-menu-item>
	
					</el-submenu>

				</el-menu>
      </el-aside>
      <!-- 右侧主体 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      // 被激活链接地址
      activePath: '',
      menuShow: 'display:none'
    }
  },
  created () {
    this.activePath = window.sessionStorage.getItem('activePath')
    if (window.sessionStorage.getItem('token') == 1) {
        this.menuShow = 'display:block' 
    } 
  },
  methods: {
    logout () {
      // 清楚sessionStorage里面的token
      window.sessionStorage.clear()
      // 重定向，跳转到登录页面
      this.$router.push('/login')
    },
    saveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }
  }
}
</script>

<style lang="less" scoped>
	.el-container {
		height: 100%;
	}

	.el-header {
		height: 120px;
		background-color: #2B4B6B;
		align-items: center;
		justify-content: space-between;
		display: flex;
		color: #fff;
		/* margin-bottom: 1px ; */
	}

	.el-aside {
    width: 200px;
		background-color: #2B4B6B;
	}

	.el-main {
		background-color: #EAEDF1;
	}
</style>
